<template>
  <div class="layout">
    <n-menu
      class="menu"
      :options="runOption()"
      @update:value="handleUpdateValue"
    />
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { RouterLink, RouterView } from "vue-router";

const router = useRouter();

const runOption = () => {
  return router
    .getRoutes()
    .filter((route) => {
      return route.meta.menu;
    })
    .map((item) => ({
      label: () =>
        h(
          RouterLink,
          {
            to: {
              name: item.name,
            },
          },
          { default: () => item.meta.title }
        ),
      key: item.path,
    }));
};

runOption();

const handleUpdateValue = (key, item) => {
  console.log("key", key);
  console.log("item", item);
};
</script>
<style lang="scss" scoped>
.layout {
  width: 100vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.menu {
  width: 150px;
}
</style>
